<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Add video content</title>
    <link href="css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<f:view>
<f:loadBundle basename="ResourceBundle" var="bundle"/>


<div id="addAudioContentExternal" align="left" style="height: 600px">
    <div id="add-video-content">

        <h:form id="uploadVideoFileForm" enctype="multipart/form-data" style="position: absolute;top: 5%">
            <h:panelGrid columns="1" width="100%" border="0">
                <object type="application/x-shockwave-flash" style="width:300px; height:200px;"
                        data="http://www.youtube.com/v/cyb4Wq8UYyA?rel=0&amp;autoplay=0&amp;showsearch=0&amp;showinfo=0">
                    <param name="movie"
                           value="http://www.youtube.com/v/cyb4Wq8UYyA?rel=0&amp;autoplay=0&amp;showsearch=0&amp;showinfo=0"/>
                </object>
            </h:panelGrid>
        </h:form>

        <h:form id="addAudioContentForm">
            <div style="position: absolute; top: 1%; left: 10%;">
                <h:outputText value="N  #{videoContentBean.contentId}" style=" width: 40px;background-color:#e8e7e9;"/>
            </div>

            <div id="left-block"
                 style="position:absolute;top:45%; left:1%; width: 32%; height:47%;background-color: #e8e7e9;">
                <h:outputText value="#{bundle.declare_budget}" styleClass="labels" style="top:10px"/>
                <h:inputText value="#{videoContentBean.newVideoContentBudget}" styleClass="fields" style="top:10px"/>
                <br>
                <br>
                <h:outputText value="#{bundle.declareViewingCost}" styleClass="labels"/>
                <h:inputText value="#{videoContentBean.newContentViewingCost}" styleClass="fields"/>
                <br>
                <br>
                <h:outputText value="#{bundle.contentStatus}" styleClass="labels"/>
                <h:inputText readonly="true" value="#{videoContentBean.videoContentStatus}" styleClass="fields"/>
                <br>
                <br>
                <h:outputText value="#{bundle.contentCategory}" styleClass="labels"/>
                <h:selectOneMenu value="#{videoContentBean.chosenCategoryId}" styleClass="fields">
                    <f:selectItems value="#{videoContentBean.categories}"/>
                </h:selectOneMenu>
                <br>
                <br>
                <h:outputText value="#{bundle.advertiserSite}" styleClass="labels"/>
                <h:inputText value="#{videoContentBean.advertiserSite}" styleClass="fields"/>
            </div>

            <div id="right-block"
                 style="position:absolute; top:2%;left:34%; width: 64%; height: 90%; background-color: #e8e7e9;">
                <div style="position:absolute;top:1%;left:1%;width: 80%;height: 40%;">
                    <h:outputText value="#{bundle.newContentName}" styleClass="labels"/>
                    <h:inputText value="#{videoContentBean.newContentName}" styleClass="fields"/>
                    <br>
                    <br>
                    <h:outputText value="#{bundle.newAdvertiserName}" styleClass="labels"/>
                    <h:inputText value="#{videoContentBean.newAdvertiserName}" styleClass="fields"/>
                    <br>
                    <br>
                    <h:outputText value="#{bundle.textDescription}" styleClass="labels"/>
                    <br>
                    <h:inputTextarea value="#{videoContentBean.description}" rows="4" style="width: 96%;height: 50px"/>
                </div>
                <div style="position:absolute;top:1%;right:1%;width: 18%;height: 40%; text-align: center;background-color: #e8e7e9">
                    <div style="position: absolute; top: 1%; right: 1%; background-color: #7ccff5">
                        <strong>
                            <h:outputText value="Language of "/>
                            <br>
                            <h:outputText value="uploadable content"/>
                            <br>
                            <h:commandLink value="EN"/>
                            <h:commandLink value="HI"/>
                            <h:commandLink value="TAM"/>
                        </strong>
                    </div>
                </div>
                <div id="new-content-groups">
                    <h:outputText value="#{bundle.chooseAvailableGroups}"/>
                    <div class="scrolling">
                        <h:selectManyCheckbox value="#{videoContentBean.chosenGroups}" layout="pageDirection">
                            <f:selectItems value="#{videoContentBean.groups}"/>
                        </h:selectManyCheckbox>
                    </div>
                    <div>
                        <h:commandButton value="#{bundle.checkAllButton}"
                                         actionListener="#{videoContentBean.checkAllGroups}"/>
                        <h:commandButton value="#{bundle.uncheckAllButton}"
                                         actionListener="#{videoContentBean.clearAllGroups}"/>
                    </div>
                </div>
                <div id="new-content-regions">
                    <h:outputText value="#{bundle.chooseAvailableRegions}"/>
                    <div class="scrolling">
                        <h:selectManyCheckbox value="#{videoContentBean.chosenRegions}" layout="pageDirection">
                            <f:selectItems value="#{videoContentBean.regions}"/>
                        </h:selectManyCheckbox>
                    </div>
                    <div>
                        <h:commandButton value="#{bundle.checkAllButton}"
                                         actionListener="#{videoContentBean.checkAllRegions}"/>
                        <h:commandButton value="#{bundle.uncheckAllButton}"
                                         actionListener="#{videoContentBean.clearAllRegions}"/>
                    </div>
                </div>
            </div>
            <div style="position: absolute;bottom: 1%; right: 1%">
                <h:commandButton value="#{bundle.uploadContentButton}" action="#{videoContentBean.toVideoContent}"/>
                <h:commandButton value="#{bundle.cancelButton}" action="#{videoContentBean.backToVideoContent}"/>
            </div>
        </h:form>
    </div>
    </f:view>

</body>

</html>